<template>
  <div class="projects-page">
    <section class="page-header">
      <div class="container">
        <h1 class="page-title" data-aos="fade-up">我的项目</h1>
        <p class="page-description" data-aos="fade-up" data-aos-delay="100">
          探索我的作品集，了解我的技能和创意
        </p>
      </div>
    </section>

    <section class="section projects-section">
      <div class="container">
        <div class="filter-container" data-aos="fade-up">
          <button 
            :class="['filter-btn', { active: activeCategory === 'all' }]" 
            @click="setCategory('all')"
          >
            全部
          </button>
          <button 
            v-for="category in categories" 
            :key="category"
            :class="['filter-btn', { active: activeCategory === category }]" 
            @click="setCategory(category)"
          >
            {{ category }}
          </button>
        </div>

        <transition-group name="projects-fade" tag="div" class="projects-grid">
          <div 
            v-for="project in filteredProjects" 
            :key="project.id" 
            class="project-item"
            data-aos="fade-up"
          >
            <ProjectCard :project="project" />
          </div>
        </transition-group>
      </div>
    </section>
  </div>
</template>

<script>
import ProjectCard from '@/components/ProjectCard.vue';

export default {
  name: 'Projects',
  components: {
    ProjectCard
  },
  data() {
    return {
      activeCategory: 'all',
      projects: [
        {
          id: 1,
          title: '电子商务平台',
          description: '响应式电子商务网站，拥有产品目录、购物车、用户认证和支付集成功能',
          image: 'https://via.placeholder.com/600x400',
          category: 'Web开发',
          technologies: ['Vue.js', 'Node.js', 'MongoDB', 'Express'],
          link: '#',
          featured: true
        },
        {
          id: 2,
          title: '任务管理应用',
          description: '功能齐全的任务管理应用，支持任务创建、分类、优先级设置和日期跟踪',
          image: 'https://via.placeholder.com/600x400',
          category: 'Web应用',
          technologies: ['React', 'Redux', 'Firebase'],
          link: '#',
          featured: true
        },
        {
          id: 3,
          title: '天气应用',
          description: '实时天气应用，提供当前天气信息和五天预报，包括温度、湿度和风速',
          image: 'https://via.placeholder.com/600x400',
          category: 'Web应用',
          technologies: ['JavaScript', 'API集成', 'CSS3'],
          link: '#'
        },
        {
          id: 4,
          title: '健身追踪器',
          description: '健身活动跟踪应用，支持各种锻炼类型、进度统计和目标设置',
          image: 'https://via.placeholder.com/600x400',
          category: 'Web应用',
          technologies: ['Vue.js', 'Vuex', 'Chart.js'],
          link: '#'
        },
        {
          id: 5,
          title: '公司网站重设计',
          description: '现代化公司网站重设计项目，包括响应式布局和改进的用户体验',
          image: 'https://via.placeholder.com/600x400',
          category: 'Web设计',
          technologies: ['HTML5', 'CSS3', 'JavaScript', 'WordPress'],
          link: '#'
        },
        {
          id: 6,
          title: '食谱分享平台',
          description: '社交食谱分享平台，用户可以创建、分享、收藏和评论食谱',
          image: 'https://via.placeholder.com/600x400',
          category: 'Web开发',
          technologies: ['React', 'Node.js', 'MongoDB', 'Express'],
          link: '#'
        }
      ]
    };
  },
  computed: {
    categories() {
      const categoriesSet = new Set(this.projects.map(project => project.category));
      return [...categoriesSet];
    },
    filteredProjects() {
      if (this.activeCategory === 'all') {
        return this.projects;
      }
      return this.projects.filter(project => project.category === this.activeCategory);
    }
  },
  methods: {
    setCategory(category) {
      this.activeCategory = category;
    }
  }
};
</script>

<style scoped lang="scss">
.page-header {
  padding: 8rem 0 4rem;
  background: linear-gradient(to right, rgba(10, 10, 10, 0.8), rgba(10, 10, 10, 0.8)), url('https://via.placeholder.com/1920x1080') no-repeat center/cover;
  text-align: center;
  
  .page-title {
    font-size: 3rem;
    margin-bottom: 1.5rem;
    background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  
  .page-description {
    max-width: 700px;
    margin: 0 auto;
    font-size: 1.1rem;
    color: var(--text-muted);
    line-height: 1.7;
  }
}

.projects-section {
  padding: 5rem 0;
}

.filter-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 3rem;
  
  .filter-btn {
    background: rgba(255, 255, 255, 0.03);
    border: none;
    padding: 0.8rem 1.5rem;
    color: var(--text-muted);
    font-size: 0.9rem;
    border-radius: 30px;
    cursor: pointer;
    transition: all 0.3s ease;
    
    &:hover {
      background: rgba(255, 255, 255, 0.05);
      transform: translateY(-3px);
    }
    
    &.active {
      background: linear-gradient(45deg, var(--primary-color), var(--secondary-color));
      color: #fff;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
    }
  }
}

.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
  gap: 2.5rem;
}

.project-item {
  transition: all 0.5s ease;
}

.projects-fade-enter-active, 
.projects-fade-leave-active {
  transition: all 0.5s ease;
}

.projects-fade-enter-from, 
.projects-fade-leave-to {
  opacity: 0;
  transform: translateY(30px);
}

@media (max-width: 992px) {
  .projects-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 2rem;
  }
}

@media (max-width: 768px) {
  .page-header {
    padding: 6rem 0 3rem;
    
    .page-title {
      font-size: 2.2rem;
    }
  }
  
  .filter-container {
    gap: 0.8rem;
    
    .filter-btn {
      padding: 0.6rem 1.2rem;
      font-size: 0.85rem;
    }
  }
}

@media (max-width: 576px) {
  .projects-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}
</style> 